<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="stylesheet" type="text/css" th:href="@{/statics/css/lib.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/statics/css/style.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/statics/css/1362.css}">
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
    <link rel="stylesheet" th:href="@{/statics/css/mdui/mdui.min.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/statics/css/semantic/semantic.min.css}">
    <script type="text/javascript" th:src="@{/statics/js/jquery-1.11.3.min.js}"></script>
    <script type="text/javascript" th:src="@{/statics/js/jquery-2.1.4.js}"></script>
    <script type="text/javascript" th:src="@{/statics/js/org1480746227.js}" data-main="baseMain"></script>
    <script th:src="@{/statics/js/semantic/semantic.min.js}"></script>
    <title>家具售后系统</title>
    <style type="text/css">
        html {
            background: rgb(247,247,247)
        }

        .icon_awesome {
            margin-right: 20px;
        }
    </style>
</head>

<body style="background: rgb(247,247,247)">
<div id="header" class="index_nav" style="background-color: white;box-shadow: 0px 2px 3px #dedede">
    <div class="content">
        <a href="index.html" id="logo"><img th:src="@{/statics/images/1482810077929.png}" height="40"/></a>
        <ul id="nav">
            <li class="navitem">
                <a class="nav-a " th:href="@{'/web/index.html'}" target="_self"><span data-title="首页">首页</span></a>
            </li>
            <li class="navitem">
                <a class="nav-a " th:href="@{'/web/product.html?pageNo=1&type=-1'}" target="_self">
                    <span data-title="产品展示">产品展示</span>
                </a>
            </li>
<!--            <li class="navitem">-->
<!--                <a class="nav-a " th:href="@{'/web/team.html'}" target="_self"><span data-title="我们团队">我们团队</span></a>-->
<!--            </li>-->
            <li class="navitem">
                <a class="nav-a" th:href="@{'/web/news.html/1'}" target="_self"><span data-title="资讯中心">资讯中心</span></a>
            </li>
<!--            <li class="navitem">-->
<!--                <a class="nav-a " th:href="@{'/web/contact.html'}" target="_self"><span data-title="联系我们">联系我们</span></a>-->
<!--            </li>-->
            <li class="navitem">
                <a th:if="${session.user} == null" class="nav-a " th:href="@{'/web/login.html'}" target="_self"><span data-title="登录">登录</span></a>
                <a th:if="${session.user} != null" class="nav-a active" onclick="inst.open()" href="javascript:void(0);" target="_self"><span data-title="个人信息" th:text="${session.user.account}"></span></a>
            </li>
        </ul>
        <div class="clear"></div>
    </div>
    <a id="headSHBtn" href="javascript:;"><i class="fa fa-bars"></i></a>
</div>
<div id="sitecontent" style="min-height: 750px">

    <div id="newsPage" class="npagePage Pagenews">
        <div class="content" style="margin-top: 90px;overflow: hidden">
            <div id="newslist" style="width: 100%;margin-top: 50px">
                <div class="wrapper">
                        <p style="margin-left: 50px;font-size: 30px;color: #000000;font-style:italic;text-align: left">用户中心</p>
                    <div class="mdui-container" style="text-align: left;margin-bottom: 45px" th:if="${session.user} != null">
                        <div class="mdui-row">
                            <div class="mdui-col-sm-6 mdui-col-md-4" style="padding: 0">
                                <div class="mdui-card">
                                    <div class="mdui-card-header">
                                        <div class="mdui-card-header-title"><span th:text="${session.user.account}" style="font-size: 15px"></span></div>
                                        <div class="mdui-card-header-subtitle"><span th:text="${session.user.createDate}"></span></div>
                                    </div>
                                    <div class="mdui-card-media">
                                        <img th:src="@{/statics/images/em/card.jpg}"/>
                                        <div class="mdui-card-menu">
                                            <div data-content="添加用户">
                                                <button class="mdui-btn mdui-btn-icon mdui-text-color-white">
                                                    <i class="fa fa-share-alt-square" aria-hidden="true"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="mdui-card-primary">
                                        <div class="mdui-card-primary-title"><span th:text="${session.user.account}"></span></div>
                                        <div class="mdui-card-primary-subtitle">
                                            <span th:text="${session.user.email != null ? session.user.email : '未绑定'}"></span>
                                        </div>
                                    </div>
                                    <div class="mdui-card-content"></i> 用户编号：
                                        <a class="ui label">
                                            <span th:text="${session.user.code}">0.00</span>
                                        </a>
                                    </div>
<!--                                    <div class="mdui-card-actions">-->
<!--                                        <button class="mdui-btn mdui-ripple">申请开发者</button>-->
<!--                                        <button class="mdui-btn mdui-ripple">申请推广人</button>-->
<!--                                        <button class="mdui-btn mdui-btn-icon mdui-float-right"><i class="fa fa-tag" aria-hidden="true"></i></button>-->
<!--                                    </div>-->
                                </div>
                            </div>
                            <div class="mdui-col-sm-8 mdui-col-md-8" style="padding: 0px 20px">
                                <div style="box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%);">
                                    <div class="ui top attached tabular menu">
                                        <div class="active item" data-tab="userInfo">基本信息</div>
                                    </div>
<!--                                    <div data-tab="platform" class="ui bottom attached active tab segment" style="height: 417px;border: none;width: 96%;">-->
<!--                                        <div class="column" style="width: 90%;margin: 0 auto">-->
<!--                                            <div class="ui raised segment">-->
<!--                                                <a class="ui red ribbon label">购买须知</a>-->
<!--                                                <div class="ui placeholder">-->
<!--                                                    <div class="line"></div>-->
<!--                                                    <div class="line"></div>-->
<!--                                                    <div class="line"></div>-->
<!--                                                    <div class="line"></div>-->
<!--                                                    <div class="line"></div>-->
<!--                                                    <div class="line"></div>-->
<!--                                                    <div class="line"></div>-->
<!--                                                    <div class="line"></div>-->
<!--                                                </div>-->
<!--                                                <p></p>-->
<!--                                                <a class="ui blue ribbon label">售后服务</a>-->
<!--                                                <div class="ui placeholder">-->
<!--                                                    <div class="line"></div>-->
<!--                                                    <div class="line"></div>-->
<!--                                                    <div class="line"></div>-->
<!--                                                    <div class="line"></div>-->
<!--                                                    <div class="line"></div>-->
<!--                                                    <div class="line"></div>-->
<!--                                                    <div class="line"></div>-->
<!--                                                    <div class="line"></div>-->
<!--                                                </div>-->
<!--                                            </div>-->
<!--                                        </div>-->
<!--                                    </div>-->
                                    <div class="ui bottom attached active tab segment" data-tab="userInfo" style="height: 557px;border: none;width: 96%;">
                                        <form class="ui form" style="width: 90%;margin: 0 auto">
                                            <h4 class="ui dividing header" style="width: 100%;background: none;top: 0px;height: 25px">个人信息</h4>
                                            <div class="field">
                                                <label>账户名称</label>
                                                <input style="width: 95%" disabled type="text" th:value="${session.user.account}" name="account" placeholder="账户名称">
                                            </div>
<!--                                            <div class="field">-->
<!--                                                <label>性 别</label>-->
<!--                                                <div id="sex" class="ui selection dropdown" style="width: 92%;min-height: auto">-->
<!--                                                    <input type="hidden" id="sex_value" name="gender">-->
<!--                                                    <i class="dropdown icon"></i>-->
<!--                                                    <div class="default text">性别</div>-->
<!--                                                    <div class="menu">-->
<!--                                                        <div class="item" data-value="0">男性</div>-->
<!--                                                        <div class="item" data-value="1">女性</div>-->
<!--                                                        <div class="item" data-value="2">保密</div>-->
<!--                                                    </div>-->
<!--                                                </div>-->
<!--                                                <script type="text/javascript">-->
<!--                                                    $(".ui.dropdown").dropdown();-->
<!--                                                </script>-->
<!--                                            </div>-->
                                            <div class="field">
                                                <label>客户姓名</label>
                                                <input style="width: 95%" type="text" th:value="${session.user.name}" name="name" id="u-name" placeholder="客户姓名">
                                            </div>
                                            <div class="field">
                                                <label>联系电话</label>
                                                <input style="width: 95%" type="text" th:value="${session.user.phone}" name="phone" id="u-phone" placeholder="联系电话">
                                            </div>
                                            <div class="field">
                                                <label>收货地址</label>
                                                <input style="width: 95%" type="text" th:value="${session.user.address}" name="address" id="u-address" placeholder="收货地址">
                                            </div>
                                            <div class="ui button" tabindex="0" style="margin-top: 20px" id="submitUser">
                                                <i class="fa fa-random" aria-hidden="true"></i> 更 新
                                            </div>
                                        </form>
                                    </div>
<!--                                    <div class="ui bottom attached tab segment" data-tab="safety" style="height: 417px;border: none;width: 96%;">-->
<!--                                        <div style="width: 90%;margin: 0 auto">-->
<!--                                            <h4 class="ui dividing header" style="width: 100%;background: none;top: 0px;height: 25px">验证您的账户信息</h4>-->
<!--                                            <div class="ui form success" th:if="!${#strings.isEmpty(session.user.phone)}">-->
<!--                                                <div class="field">-->
<!--                                                    <label>手机号码</label>-->
<!--                                                    <input disabled th:value="${session.user.phone}" style="width: 95%">-->
<!--                                                </div>-->
<!--                                                <div class="ui success message">-->
<!--                                                    <p><i class="fa fa-check" aria-hidden="true"></i>手机号码验证成功</p>-->
<!--                                                </div>-->
<!--                                            </div>-->
<!--                                            <div class="ui form warning" style="margin-top: 20px" th:if="${#strings.isEmpty(session.user.phone)}">-->
<!--                                                <div class="field">-->
<!--                                                    <label>手机号码</label>-->
<!--                                                    <div class="ui action input field" style="width: 60%;margin-top: 10px">-->
<!--                                                        <input id="phoneValue" type="text" placeholder="手机号码验证">-->
<!--                                                        <button class="ui teal right labeled icon button" id="sendVerify">-->
<!--                                                            <i class="icon"><i style="line-height: 38px" class="fa fa-paper-plane" aria-hidden="true"></i></i>-->
<!--                                                            发送-->
<!--                                                        </button>-->
<!--                                                    </div>-->
<!--                                                    <div class="ui action input field" style="width: 60%">-->
<!--                                                        <input id="verifyValue" type="text" placeholder="校验验证码">-->
<!--                                                        <button class="ui primary  right labeled icon button" id="checkVerify">-->
<!--                                                            <i class="icon"><i style="line-height: 38px" class="fa fa-unlock-alt" aria-hidden="true"></i></i>-->
<!--                                                            校验-->
<!--                                                        </button>-->
<!--                                                    </div>-->
<!--                                                </div>-->
<!--                                                <div class="ui warning hidden message" id="messageTip">-->
<!--                                                    <p>-->
<!--                                                        <i class="fa fa-question-circle-o" aria-hidden="true"></i>-->
<!--                                                        <span>请注意短信收到的信息</span>-->
<!--                                                    </p>-->
<!--                                                </div>-->
<!--                                            </div>-->
<!--                                        </div>-->
<!--                                    </div>-->
                                </div>
                                <script>
                                    $(".tabular.menu .item").tab();
                                </script>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <div class="clear"></div>
        </div>
    </div>
</div>

<div id="indexPage">
    <div id="mcontact" class="module" style="background-color: rgb(247,247,247);">
        <div class="bgmask"></div>
        <div class="content">
            <div class="header wow fadeInUp fw" data-wow-delay=".1s">
                <p class="title" style="margin-top: 60px">README</p>
            </div>
            <div id="contactlist" class="fw">
                <div id="contactinfo" class="fl wow" data-wow-delay=".2s">

                    <h3 class="ellipsis name">家具售后服务</h3>
                    <p class="ellipsis add"><span>地点：</span>保密</p>
                    <p class="ellipsis zip"><span>邮编：</span>044000</p>
                    <p class="ellipsis tel"><span>电话：</span>199XXXX0631</p>
                    <p class="ellipsis mobile"><span>手机：</span>199XXXX0631</p>
                    <p class="ellipsis fax"><span>传真：</span>保密</p>
                    <p class="ellipsis email"><span>邮箱：</span>fan1ke2ke@gmail.com</p>
                    <div>
                        <a class="fl" href="javascript:;"><i class="fa fa-weibo"></i></a>
                        <a class="fl" href="javascript:;"><i class="fa fa-qq"></i></a>
                        <a class="fl" href="javascript:;"><i class="fa fa-weixin"></i></a>
                    </div>
                </div>
                <div id="contactform" class="fr wow" data-wow-delay=".2s">
                    <form action="#" method="post">
                        <p>
                            <input type="text" class="inputtxt name" name="name" placeholder="姓名" autocomplete="off"/>
                        </p>
                        <p>
                            <input type="text" class="inputtxt email" name="email" placeholder="邮箱" autocomplete="off"/>
                        </p>
                        <p>
                            <input type="text" class="inputtxt tel" name="tel" placeholder="电话" autocomplete="off"/>
                        </p>
                        <p>
                            <textarea class="inputtxt cont" name="content" placeholder="内容" autocomplete="off"></textarea>
                        </p>
                        <p>
                            <input class="inputsub" type="submit" value="提交"/>
                        </p>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="mdui-drawer mdui-drawer-close" id="drawer" style="background: rgb(247,247,247);">
    <img th:src="@{/statics/images/default_geocode-1x.png}" alt="" width="100%" height="80px"/>
    <ul class="mdui-list">
        <li class="mdui-list-item">
            <a class="ui teal image label">
                <img src="https://semantic-ui.com/images/avatar/small/veronika.jpg">
                <span th:if="${session.user} != null" th:text="${session.user.account}"></span>
            </a>
        </li>
        <li class="mdui-list-item mdui-ripple" onclick="window.open('/web/user','_self')">
            <div class="icon_awesome"><i class="fa fa-address-card" aria-hidden="true"></i></div>
            <div class="mdui-list-item-content">个人信息</div>
        </li>
        <li class="mdui-list-item mdui-ripple" onclick="window.open('/web/order/1','_self')">
            <div class="icon_awesome"><i class="fa fa-credit-card" aria-hidden="true"></i></div>
            <div class="mdui-list-item-content">我的工单</div>
        </li>
        <li class="mdui-list-item mdui-ripple" onclick="window.open('/web/system/1','_self')">
            <div class="icon_awesome"><i class="fa fa-thumbs-o-up" aria-hidden="true"></i></i></div>
            <div class="mdui-list-item-content">缴费记录</div>
        </li>
        <li class="mdui-list-item mdui-ripple" onclick="window.open('/web/message/1','_self')">
            <div class="icon_awesome"><i class="fa fa-list-alt" aria-hidden="true"></i></div>
            <div class="mdui-list-item-content">维修记录</div>
        </li>
        <li class="mdui-list-item mdui-ripple" style="position: fixed;bottom: 50px;width: 100%" onclick="window.open('/web/logout','_self')">
            <div class="icon_awesome red"><i class="fa fa-sign-out" aria-hidden="true" style="color: red"></i></div>
            <div class="mdui-list-item-content">退出登录</div>
        </li>
    </ul>
</div>

<div id="footer" style="margin-top: 15px">
    <p>
        COPYRIGHT (©) 2020 家具售后服务
        <a href="http://www.beian.gov.cn/portal/index.do" style="width: 300px;margin-top: 0;margin-left: 50px"><img th:src="@{/statics/images/kimo.png}" style="margin-top: 10px"/>&nbsp;粤ICP备2021090004号-1</a>
    </p>
</div>
<div id="shares">
    <a id="sshare"><i class="fa fa-share-alt"></i></a>
    <a href="javascript:;" id="gotop"><i class="fa fa-angle-up"></i></a>
</div>
<div id="online_open"><i class="fa fa-comments-o"></i></div>
<div id="online_lx">
    <div id="olx_head">联系我们<i class="fa fa-times fr" id="online_close"></i></div>
    <ul id="olx_qq">
        <li>
            <a href="javascript:;" style="font-size: 14px; color: #777">问题答疑?</a>
        </li>
    </ul>
    <div id="olx_tel">
        <div style="color: #777"><i class="fa fa-phone" style="margin-right: 8px;"></i>请联系我们</div>
        <p style="color: #777; font-size: 16px">199XXXX0631<br/></p>
    </div>
</div>
<div class="hide">
</div>
</body>
<script th:src="@{/statics/js/mdui/mdui.min.js}"></script>
<script type="text/javascript">
    let inst = new mdui.Drawer('#drawer', {overlay: true});
    $('#submitUser').on('click',function () {
        $.ajax({
            url:"/business/user/data",
            type: "PUT",
            data: {name: $('#u-name').val(), address: $('#u-address').val(), phone: $('#u-phone').val()},
            dataType: "json",
            // contentType: "application/json;charset=UTF-8",
            success: function(response){
                location.reload();
            }
        });
    })
</script>
</html>